<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称:" prop="roleName">
          <el-input v-model="form.roleName" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色等级:" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio :label="'0'">通用角色</el-radio>
            <el-radio :label="'1'">授权授权</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授予权限:">
          <vxe-table
                  ref="xTree1"
                  show-overflow
                  row-key
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :data="tableData"
                  height="200px"
                  :checkbox-config="{labelField: 'meunName'}"
                  :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
            <vxe-column type="checkbox" tree-node></vxe-column>
          </vxe-table>
        </el-form-item>
        <el-form-item label="角色简介:">
          <el-input class="desc" type="textarea" v-model="form.des" rows="3" placeholder="简介......"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  import {rolePublic, saveRole} from '@/api/operations-center/role'
  import {meunList} from "@/api/operations-center/meun";

  export default {
    name: "RoleAdd",
    mixins: [rolePublic],
    data() {
      return {}
    },
    methods: {
      /**
       * {获取菜单列表}
       *
       * @author: 宋康
       * @date: 2022/8/18 09:46
       */
      queryMeunList() {
        meunList('', false, []).then(res => {
          if (res.status) {
            this.tableData = res.data;
          }
        })
      },
      /**
       * {添加}
       *
       * @author: 宋康
       * @date: 2022/8/19 11:33
       */
      onSubmit() {
        this.form.meunList = this.getTreeData('xTree1')
        //
        this.$refs['form'].validate((valid) => {
          if (valid) {
            saveRole(this.form).then(res => {
              if (res.status) {
                this.$XModal.alert({
                  content: '添加成功',
                  status: 'success',
                }).then(() => {
                  this.cancel();
                })
              } else {
                this.$XModal.alert({
                  content: res['msg'],
                  status: 'error',
                })
              }
            })
          } else {
            return false;
          }
        });
      }
    },
    mounted() {
      this.queryMeunList();
    }
  }
</script>

<style lang="scss" scoped>
  .div1 {
    padding-left: 30%;
    padding-right: 30%;
  }
</style>
